<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">

        #box {
            width: 406px; height: 635px;
            float: right;
            position: relative;
            background-color: #FFF;
        }
        #coor {
            width: 10px;
            cursor: w-resize;
            position: absolute;
            left: 0;
            bottom: 0;
            top: 0;
            background-color: #09C;
        }
        body {
            background-color: #F3F3F3;
        }

    </style>
</head>
<body style="">
<div id="box">
    <div id="coor"></div>
</div>
<script>
    // lyu 测试 20190301
    $(function () {
        function Scale(config) {
            this.isMoving = false;
            this.target = $("#box");
            this.MAX_WIDTH = 800;
            this.MIN_WIDTH = 200;
            this.originalWidth = null;
            this.originalX = null;
        }
        Scale.prototype = {
            init: function () {
                var me = this;
                $("#coor").on('mousedown', function (e) {
                    me.originalWidth = me.target.width();
                    me.originalX = e.pageX;
                    me.isMoving = true; // 是否在移动的标识符
                })
                $(document).mousemove(function (e) {
                    if(me.isMoving){
                        me.reCal(e);
                    }
                }).mouseup(function (e) {
                    if (me.isMoving) {
                        // mouseup，清空，重置
                        me.isMoving = false;
                    }
                });
            },
            reCal: function (e) {
                var me = this;
                var reWidth = me.originalX - e.pageX + me.originalWidth;
                if(reWidth >= me.MAX_WIDTH) {
                    reWidth = me.MAX_WIDTH;
                }else if(reWidth <= me.MIN_WIDTH){
                    reWidth = me.MIN_WIDTH;
                }
                me.target.css({
                    'width': reWidth
                });
            }
        }
        var scale = new Scale();
        scale.init();
    });
</script>
</body>
</html>
